<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'questionList.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>

<body>
	<h3 style="padding:15px;">试题列表</h3>
	<div class="pd-20">

		<!-- <div class="text-c">
	  <form action="findbymob">
		<input type="text" class="input-text" style="width:180px" placeholder="输入电话" id="mobile" name="mobile">
		<input type="submit" class="btn btn-success radius" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>
	  </form>
	</div>  -->

		<div class="mt-20">
			<table
				class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<!-- <th width="80">序号</th> -->
						<th width="50">问题编号</th>
						<th width="50">题目</th>
						<th width="50">选项A</th>
						<th width="300">选项B</th>
						<th width="50">选项C</th>
						<th width="50">选项D</th>
						<th width="40">正确答案</th>
						<th width="40">分数</th>
						<th width="40">难度</th>
						<th width="40">操作</th>
						<th class="hidden">隐藏</th>
					</tr>
					
				</thead>
				<tbody>
					<c:forEach items="${fungameQuestionList}" var="fungameQuestionList">
						
						
						
						<tr>
							<td style="text-align:center;"><c:out value="${fungameQuestionList.id}"></c:out></td>
							<td><c:out value="${fungameQuestionList.question}"></c:out></td>
							<td><c:out value="${fungameQuestionList.a}"></c:out></td>
							<td><c:out value="${fungameQuestionList.b}"></c:out></td>
							<td><c:out value="${fungameQuestionList.c}"></c:out></td>
							<td><c:out value="${fungameQuestionList.d}"></c:out></td>
							<td style="text-align:center;"><c:out value="${fungameQuestionList.question_answer}"></c:out></td>
							<td style="text-align:center;"><c:out value="${fungameQuestionList.score}"></c:out></td>
							<td style="text-align:center;"><c:out value="${fungameQuestionList.difficulity_rank}"></c:out></td>
							<td class="options hidden"><c:out value="${fungameQuestionList.options}"></c:out></td>

							<%-- <td style="display:none"><c:out value="${manager.id}"></c:out></td> --%>
							<td class="td-manage"><a title="编辑" class="ml-5 edit"
								style="text-decoration:none" onclick="edit(this)"> <i
									class="Hui-iconfont">&#xe6df;</i></a> <!-- <a
								style="text-decoration:none" class="ml-5"
								onClick="alterPassword(this)" title="修改密码"> <i
									class="Hui-iconfont">&#xe63f;</i> --> </a> <!-- <a title="删除"
								href="javascript:;" onclick="remove(this)" class="ml-5"
								style="text-decoration:none"> <i class="Hui-iconfont">&#xe6e2;</i></a> --></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
	</div>
	<div class="editor_background" id="bcg_editor">
		<form id="question_editor_form"
			class="editor_main form form-horizontal">
			<legend>试题信息窗口 </legend>
			<div class="row" style="margin-top: 25px;">
				<label class="form-label col-xs-4 col-sm-3">问题编号:</label>
				<div class="formControls col-xs-8 col-sm-9" style="width: 30%;">
					<input id="i_question_id" class="input-text" type="text" disabled>
				</div>
			</div>
			<br />
			<div class="row">
				<label class="form-label col-xs-4 col-sm-3">考点:</label>
				<div class="formControls col-xs-8 col-sm-9">
					<span class="select-box span_1" style="float:left;margin-left:0px"><select id="sel_major"
						class="select" size="1" name="sel_major  style="float:left;margin-left:0px">
							
					</select> </span> <span class="select-box span_2" style="float:left;"> <select
						id="sel_subject" class="select" size="1" name="sel_subject">
							
					</select>
					</span> <span class="select-box span_2 hidden" style="width: 115px;"> <select
						id="sel_knowledge" class="select" size="1" name="sel_knowledge">
							
					</select>
					</span>
				</div>
			</div>
		
			<div class="row hidden" style="margin-top: 25px;">
				<label class="form-label col-xs-4 col-sm-3">创题人:</label>
				<div class="formControls col-xs-8 col-sm-9" style="width: 30%;">
					<input id="i_examiners" class="input-text" type="text" disabled>
				</div>
			</div>
			<br />
			<div class="row" style="margin-top: 25px;">
				<label class="form-label col-xs-4 col-sm-3">参考分值:</label>
				<div class="formControls col-xs-8 col-sm-9" style="width: 30%;">
					<input id="i_reference_score" name="i_reference_score"
						class="input-text" type="text">
				</div>
			</div>
			<br />
			<div class="row" style="margin-top: 25px;">
				<label class="form-label col-xs-4 col-sm-3">难易程度:</label>
				<div class="formControls col-xs-8 col-sm-9" style="width:100px">
					<span class="select-box"> <select id="sel_rank"
						class="select" size="1" name="sel_rank">
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
					</select>
					</span>
				</div>

			</div>
			<br />
			<div class="row" style="margin-top: 25px;">
				<label class="form-label col-xs-4 col-sm-3">类型:</label>
				<div class="formControls skin-minimal col-xs-8 col-sm-9"
					style="width: 150px">
					<span class="select-box"> <select id="sel_type"
						class="select" name="sel_type">
							<option value="单选题">单选题</option>
					</select>
					</span>
				</div>
			</div>
		
			<div class="row "  style="margin-top: 25px;display:none;">
				<label class="form-label col-xs-4 col-sm-3">修改时间:</label>
				<div class="formControls col-xs-8 col-sm-9" style="width: 35%">
					<input id="i_alter_time" class="input-text" type="text" disabled>
				</div>
			</div>
			<br />
			<div class="row" style="margin-top: 25px;">
				<label class="form-label col-xs-4 col-sm-3">问题:</label>
				<div class="formControls col-xs-8 col-sm-9 div_text">
					<textarea id="ta_question" name="ta_question" class="textarea"></textarea>
				</div>
			</div>
			<br /> <br /> <br /> <br />
			<div class="row" style="margin-top: 25px;">
				<label class="form-label col-xs-4 col-sm-3">选项:</label>
				<div class="formControls col-xs-8 col-sm-9 div_text">
					<div class="options-box">
						<div class="options-div option_div">
							<div class="radio-box option">
								<input type="radio" id="radio-1" name="radio1" value="A">
								<label for="radio-1">A</label>
							</div>
							<div class="check-box hidden option">
								<input type="checkbox" id="checkbox-1" name="checkbox1"
									value="A"> <label for="checkbox-1">A</label>
							</div>
							<textarea class="textarea radius textarea-options testarea_2"
								rows="" cols="" id="option_A"></textarea>
						</div>
						<div class="options-div option_div">
							<div class="radio-box option">
								<input type="radio" id="radio-2" name="radio1" value="B">
								<label for="radio-2">B</label>
							</div>
							<div class="check-box hidden option">
								<input type="checkbox" id="checkbox-2" name="checkbox1"
									value="B"> <label for="checkbox-2">B</label>
							</div>
							<textarea class="textarea radius textarea-options testarea_2"
								rows="" cols="" id="option_B"></textarea>
						</div>
						<div class="options-div option_div">
							<div class="radio-box option">
								<input type="radio" id="radio-3" name="radio1" value="C">
								<label for="radio-3">C</label>
							</div>
							<div class="check-box hidden option">
								<input type="checkbox" id="checkbox-3" name="checkbox1"
									value="C"> <label for="checkbox-3">C</label>
							</div>
							<textarea class="textarea radius textarea-options testarea_2"
								rows="" cols="" id="option_C"></textarea>
						</div>
						<div class="options-div option_div">
							<div class="radio-box option">
								<input type="radio" id="radio-4" name="radio1" value="D">
								<label for="radio-4">D</label>
							</div>
							<div class="check-box hidden option">
								<input type="checkbox" id="checkbox-4" name="checkbox1"
									value="D"> <label for="checkbox-4">D</label>
							</div>
							<textarea class="textarea radius textarea-options testarea_2"
								rows="" cols="" id="option_D"></textarea>
						</div>
					</div>
					<div class="add-op-btn hidden">
						<a title="添加选项"><i class="Hui-iconfont">&#xe604;</i>添加选项</a>
					</div>
					<div class="delete-op-btn hidden">
						<a title="删除选项"><i class="Hui-iconfont">&#xe609;</i>删除选项</a>
					</div>
				</div>
			</div>

			<br />
			<div class="col-sm-offset-4">
				<input id="btn_ensure" class="btn btn-primary f-l btn_ensure"
					value="确认" style="width: 160px;" readonly> <input
					id="btn_exit" class="btn btn-primary f-l btn_exit" value="取消"
					style="width: 160px;" readonly>
			</div>
		</form>
	</div>
</body>
<script type="text/javascript">
	$(function() {
		$('.table-sort').dataTable({
			"aaSorting" : [ [ 0, "asc" ] ],//默认第几个排序
			"bStateSave" : true,//状态保存 
			"bRetrieve" : true,
			"aoColumnDefs" : [
			//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
			//{"orderable":false,"aTargets":[7]}// 制定列不参与排序
			]
		});
	});

	//编辑窗口取消按钮
	$(function() {
		$('#btn_exit').on('click', function() {
			$('#bcg_editor').hide();
		});

	});
	//编辑窗口确认按钮
	$(function() {
		$('#btn_ensure').on('click', function() {
			//验证表单信息
			if (!$("#question_editor_form").valid()) {
				return false;
			}
			if (!confirm("确认修改?")) {
				return false;
			}
			var questionType =1;
			var answer=[];
			//提交修改信息逻辑
			if ($("#sel_type").val() == "单选题") {
				questionType = 1;
				$('.iradio-blue.checked').each(function(){
					if($(this).find('input').val()) answer.push($(this).find('input').val())	
				})
			} else if ($("#sel_type").val() == "多选题") {
				questionType = 2;
				$('.icheckbox-blue.checked').each(function(){
					if($(this).find('input').val()) answer.push($(this).find('input').val())	
				})
			} else {
				questionType = "error";
			}
			var optionses={};
			$('.options-box').find('textarea').each(function(index){
				var letter=$(this).parent().find('label').first().html();
				optionses[letter]=$(this).val();
			})
			//缺问题选项内容和问题答案内容
			var questionInfo = {
				question : $("#ta_question").val(),
				options : optionses,
				question_answer : answer,
				reference_score : $("#i_reference_score").val(),
				difficulity_rank : $("#sel_rank").val(),
				question_type : questionType,
				major : $("#sel_major").val(),
				subject : $("#sel_subject").val(),
				knowledge : $("#sel_knowledge").val(),
			};
			

			/* $.ajax({
				"data":questionInfo,
				"url":"",
				"type":"POST",
				"success": function(result){
					var resultJson = JSON.parse(result);
					if(resultJson.code!="200"){
						alert("修改失败");
						return;
					}
					//刷新页面
					$.post("./QuestionListServlet", function(data) {
						alert("修改成功");
						$('#content').html(data);
					});
				}
			}); */

			console.log(questionInfo);

		});
	});

	//编辑窗口更改题目类型按钮
	$(function() {
		$('#btn_exit').on('click', function() {
			$('#bcg_editor').hide();
		});

	});

	//删除按钮
	function remove(widget) {
		//删除数据逻辑
	}

	//编辑按钮
	function edit(widget, option) {
		var i = 0;
		var answer;
		$(widget).parent("td").siblings("td").each(function() {
			switch (i) {
			case 0:
				$('#i_question_id').val($(this).text());
				break;
			case 1:
				//所属知识点
				$('#ta_question').val($(this).text());
			
				break;
			case 2:
				//创题人
				$("#option_A").val($(this).text());
				$('#i_examiners').val($(this).text());
				break;
			case 3:
				$("#option_B").val($(this).text());
				break;
			case 4:
				//答案
				$("#option_C").val($(this).text());
				
				/* var answers=answer.split(''); */
				break;
			case 5:
				//参考分值
				$("#option_D").val($(this).text());
				break;
			case 6:
				//难易程度
				answer=$(this).text();
				

				break;
			case 7:
				//类型
				$('#i_reference_score').val($(this).text());
				$("#sel_type")[0].value="单选题";
				render1();
				/* if ($(this).text() == "1") {
					$("#sel_type").get(0).selectedIndex = 0;
				} else if ($(this).text() == "2") {
					$("#sel_type").get(0).selectedIndex = 1;
				} */
				break;

			case 8:
				//修改时间
				if ($(this).text() == 1) {
					$("#sel_rank").get(0).selectedIndex = 0;
				} else if ($(this).text() == 2) {
					$("#sel_rank").get(0).selectedIndex = 1;
				} else if ($(this).text() == 3) {
					$("#sel_rank").get(0).selectedIndex = 2;
				}
				$('#i_alter_time').val($(this).text());
				break;
			case 9:
				//修改选项
				var options=JSON.parse($(this).text());
					showOptions(options);
				break;
			}
			i++;
		});
		showAnswer(answer);
		$('#bcg_editor').show();
	}
	function showAnswer(answer){
		var type="单选题";
		if (type == "单选题") {
			$('.iradio-blue').find('input').each(function() {
				if ($(this).val() == answer[0]) {
					$(this).next().trigger("click")
					$("#" + $(this).attr("id")).parent().addClass('checked');
				}
			})
			render();
		}
		if (type == "多选题") {
			for ( var a in answer) {
				$('.icheckbox-blue').find('input').each(function() {
					if ($(this).val() == answer[a])
						$(this).attr('checked', '');
				})
			}
			render();
		}
	}
	function showOptions(options){
		var answer_op_num = options.length;
		var page_op_num = $('.options-div').length;
		while (page_op_num > answer_op_num) {
			deleteOption();
			page_op_num = $('.options-div').length;
		}
		while (page_op_num < answer_op_num) {
			addOption();
			page_op_num = $('.options-div').length;
		}
		if (page_op_num == answer_op_num) {
			for ( var o in options) {
				var op;
				for ( var i in options[o]) {
					op = i;
				}
				$('.iradio-blue')
						.find('input')
						.each(
								function() {
									if ($(this).val() == op) {
										$(this).parent().parent().parent().find(
												'textarea')[0].value = options[o][op];
									}
								})
				// $(options[o].op).parent().parent().parent().find('textarea')[0].value=options[o].content;
			}
		}
	}
	function render() {
		$('.options-div input').iCheck({
			checkboxClass : 'icheckbox-blue',
			radioClass : 'iradio-blue',
			increaseArea : '20%'
		});

	}

	function appendText(index) {
		var txt1 = "<div class='options-div option_div'>"
				+ "<div class='radio-box option'>"
				+ "<input type='radio' id='radio-'"
				+ index
				+ "' name='radio1' value='"
				+ String.fromCharCode(64 + index)
				+ "'>"
				+ "<label for='radio-'"+index+"'>"
				+ String.fromCharCode(64 + index)
				+ "</label>"
				+ "</div>"
				+ "<div class='check-box hidden option'>"
				+ "<input type='checkbox' id='checkbox-'"
				+ index
				+ "' name='checkbox1'value='"
				+ String.fromCharCode(64 + index)
				+ "'> "
				+ "<label for='checkbox-'"+index+"'>"
				+ String.fromCharCode(64 + index)
				+ "</label>"
				+ "</div>"
				+ "<textarea class='textarea radius textarea-options testarea_2 'rows='' cols=''>"
				+ "</textarea> </div>";
		$(".options-box").append(txt1); // 追加新元素
		render();
		render1();
	}
	$(function() {

		render();
		$('#sel_type')[0].onchange = function() {
			render1();
		};

		$('.add-op-btn').on('click', function() {
			addOption();
		});
		$('.delete-op-btn').on('click', function() {
			deleteOption();
		});
	});
	function addOption() {
		var index = $('.options-div').length + 1;
		if (index < 20) {
			appendText(index);
			return true;
		} else
			console.log("选项添加已达上限，如需添加，请联系管理员！");
		return false;

	}
	function deleteOption() {
		if ($('.option_div').length > 2) {
			$(".options-div:last").remove();
			return true;
		} else {
			console.log("已经是最少选项了");
			return false;
		}
	}
	function render1() {

		if ($("#sel_type").val() == "单选题") {
			$('.check-box').each(function() {
				this.classList.add('hidden');
			});
			$('.radio-box').each(function() {
				this.classList.remove('hidden');
			});
			$('.op-answer-box').each(function() {
				this.classList.remove('hidden');
			});
			$('.discuss-answer-box').each(function() {
				this.classList.add('hidden');
			});
		}
		;
		if ($("#sel_type").val() == "多选题") {
			$('.radio-box').each(function() {
				this.classList.add('hidden');
			});
			$(".check-box").each(function() {
				this.classList.remove('hidden');
			});
			$('.op-answer-box').each(function() {
				this.classList.remove('hidden');
			});
			$('.discuss-answer-box').each(function() {
				this.classList.add('hidden');
			});
		}
		;
	}
	/* function left_btn_init() {
		$('.menu_scale').on(
				"click",
				function() {
					var o_question = sessionStorage.getItem($(this)
							.attr('name'));
					var json_q = JSON.parse(o_question);
					showContent(json_q.type, json_q.question, json_q.answer,
							json_q.options, json_q.score, json_q.difficulty);
				});
	} */

	/* function showContent(type, question, answer, options, score, difficulty) {
		$("[name='question']")[0].value = question;
		$('.select')[0].value = type;
		render1();
		if (type == "单选题") {
			$('.iradio-blue').find('input').each(function() {
				if ($(this).val() == answer[0]) {
					$(this).next().trigger("click");
					$("#" + $(this).attr("id")).parent().addClass('checked');
				}
			});
			render();
			showAnswer(options, score, difficulty);
		}
		if (type == "多选题") {
			for ( var a in answer) {
				$('.icheckbox-blue').find('input').each(function() {
					if ($(this).val() == answer[a])
						$(this).attr('checked', '');
				});
			}
			render();
			showAnswer(options, score, difficulty);
		}
		if (type == "论述题") {
			$("[name='discuss_answer']")[0].value = answer[0];
		}

	} */
	/* function showAnswer(options, score, difficulty) {
		var answer_op_num = options.length;
		var page_op_num = $('.options-div').length;
		while (page_op_num > answer_op_num) {
			if(deleteOption())
			page_op_num = $('.options-div').length;
			else break;
		}
		while (page_op_num < answer_op_num) {
			if(addOption())
			page_op_num = $('.options-div').length;
			else break;
		}
		if (page_op_num == answer_op_num) {
			for ( var o in options) {
				var op;
				for ( var i in options[o]) {
					op = i;
				}
				$('.iradio-blue').find('input').each(
						function() {
							if ($(this).val() == op) {
								$(this).parent().parent().parent().find(
										'textarea')[0].value = options[o][op];
							}
						});
				//$(options[o].op).parent().parent().parent().find('textarea')[0].value=options[o].content;
			}
		}
		$("[name='score']")[0].value = score;
		$("[name='difficulty']")[0].value = difficulty;
	} */
	$(function() {
		$('.add-btn')
				.on(
						"click",
						function() {
							var buff = {};
							var scale_num = $('.menu_scale').length + 1;
							buff["scale_num"] = scale_num;
							var question = $("[name='question']")[0].value;
							buff["question"] = question;
							var type = $("[name='op_select']")[0].value;
							buff["type"] = type;
							var score = $("[name='score']")[0].value;
							buff["score"] = score;
							var difficulty = $("[name='difficulty']")[0].value;
							buff["difficulty"] = difficulty;
							var t_options = $('.textarea-options');
							var options = [];
							var obj = {};
							for (var i = 0; i < t_options.length; i = i + 1) {
								obj[String.fromCharCode(65 + i)] = t_options[i].value;
								options.push(obj);
								obj = {};
							}
							buff["options"] = options;
							var answer = [];
							if (type == "单选题") {
								$('.iradio-blue.checked').find('input').each(
										function() {
											answer.push($(this).val());
										});
							}
							if (type == "多选题") {
								$('.icheckbox-blue.checked').find('input')
										.each(function() {
											answer.push($(this).val());
										});
							}
							if (type == "论述题") {
								answer.push($("[name='discuss_answer']").val());
							}
							buff["answer"] = answer;
							sessionStorage.setItem("q" + scale_num, JSON
									.stringify(buff));
							//console.log("JSON:___________"+sessionStorage.getItem("question2"));
							var left_btn = "<dl class='menu_scale' name='q"+scale_num+"'><ul><li><a>第"
									+ scale_num
									+ "题<p>"
									+ question
									+ "</p></a></li></ul></dl>";
							$(".menu_dropdown").append(left_btn);
							left_btn_init();
						});
	});

	//修改问题信息窗口
	$("#question_editor_form").validate({
		rules : {
			i_reference_score : {
				required : true,
				digits : true
			},
			ta_question : {
				required : true,
				maxlength : 1000
			},
		},
		onkeyup : false,
		focusCleanup : true,
		success : "valid"
	});
	function changeSubjectSelect() {
		var majorInfo = {
			major : $("#sel_major").val()
		};
		$.ajax({
			"data" : majorInfo,
			"url" : "./AlterManagerInfoServlet?method=getSubjectSelect",
			"type" : "POST",
			"success" : function(result) {
				var resultJson = JSON.parse(result);
				if (resultJson.code == "200") {
					$("#sel_subject").children("option").remove();
					$.each(resultJson.subject, function(index, value) {
						/* console.log(value); */
						var text = "<option value="+value+">" + value
								+ "</option>";
						$("#sel_subject").append(text);
					});
					/* console.log(resultJson.subject); */
					$("#sel_subject").val($("#sel_subject").children("option").eq(0).val());
					$("#sel_subject").trigger("change");
				} else {
					console.log("系统出错");
				}
			}
		});
	}

	$("#sel_major").change(function() {
		changeSubjectSelect();
		changeKnowledgeSelect();
	});

</script>

</html>
